<template>
  <div class="center">
    <swiper class="swiper" :options="swiperOption">
      <swiper-slide v-for="item in $store.state.adv.focusList.focusList" :key="item.id"><img
          :src="'/zhai'+item.imgUrl"></swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
  </div>
</template>

<script>
//引入
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
import axios from "axios";
export default {
  name: "BannerSwiper",
  // 轮播图内的组件
  components: { Swiper, SwiperSlide },
  data () {
    return {
      focusList: [],
      swiperOption: {
        loop: true,
        // 显示的屏数
        slidesPerView: 1,
        // 间距
        spaceBetween: 30,
        // 为真活动块会居中，假居左
        centeredSlides: true,
        // 自动播放
        autoplay: {
          // 延迟时间
          delay: 2000,
          // false时，用户操作之后（swipes,arrow以及pagination 点击）autoplay不会被禁掉，用户操作之后每次都会重新启动autoplay
          disableOnInteraction: true
        },
        pagination: {
          // 指定小圆点所在的元素
          el: '.swiper-pagination',
          // 是否点击小圆点可以进行切换
          clickable: true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  },
  mounted () {
    // axios.get("http://zhaizijing.com:8088/focusList").then(value => {
    //   // console.log(value.data);
    //   this.focusList = value.data;
    // })
    // axios.get("/zhai/focusList").then(res => {
    //   // console.log(res.data.focusList);
    //   this.focusList = res.data.focusList;
    // })
    this.$store.dispatch('adv/getFocusListAsync');

  }
}
</script>

<style lang="less" scoped>
.center {
  box-sizing: border-box;
  width: 740px;
  height: 100%;
  padding: 5px;
  float: left;
  .swiper {
    img {
      width: 100%;
    }
  }
}
</style>